<template>
  <view :style="{height:screenHeight + 'px',background:'#f6f6f6',paddingTop:'30rpx'}">
    <view>
      <shopping-goods
          @del="delGoods"
          v-for="(item,index) in shoppingCart"
          :index="index"
          :goods="item"
          :updateNum="item.isGift !== '1'"
          @selectGoods="setSelectGoods"
          :currentIndex.sync="currentIndex"
          showIndex
      ></shopping-goods>
    </view>
    <shopping-cart :visible="false" :selectedGoodsList="shoppingCart" :order="order" :news="news" :back="back"/>

    <!-- <view class="mask" @touchmove.stop.prevent="" @tap="close" @close="close" v-if="mask">
      <view></view>
    </view> -->
    <uni-popup  maskBackgroundColor="rgba(69,64,68,.6)" ref="popup" type="bottom"  :animation="true">
      <select-goods
        @addGoods="addGoods"
        @subPromotionList="subPromotionList"
        :customer-id="customerId"
        :goods.sync="currentGoods"
        @close="close"
        :params="query"
        :currentGiftList.sync="currentGiftList"
        :currentPromotionId.sync="currentPromotionId"
      ></select-goods>
    </uni-popup>
  </view>
</template>

<script>
import shoppingGoods from "../components/shoppingGoods";
import {getScreen} from "../../service/auth";
import shoppingCart from "../../components/shoppingCart";
import selectGoods from "../../components/selectGoods";
export default {
  name: "index",
  components:{shoppingGoods, shoppingCart, selectGoods},
  data(){
    return{
      shoppingCart:[],
      screenHeight: 0,
      customerId: '',
      currentGoods: {},
      mask: false,
      currentPromotionId: -1,
      currentGiftList:[],
      currentIndex: -1,
      order:'',
      news:'',
      back:1,
      query:{
          page: 1,
          size: 20,
          goodsTypeIds:'',
          type: 'SALE',
          isIgnoreZeroUnGiftGoodsCount: 1,
          isAppletSale:1,
          scope:0,
          ignoreGoodsTagNames:'回瓶回箱,瓶盖'
      },
    }
  },
  onShow(){

  },
  onLoad(option){
    this.order=option.order
    this.news=option.news
  },
  created() {
    const app = getApp()
    this.shoppingCart = app.globalData.shoppingCart
    this.customerId = app.globalData.selectedPosition.id
    const {height} = getScreen()
    this.screenHeight = height
  },
  methods:{
    setSelectGoods(val){
      this.currentGoods = val
      this.currentPromotionId = val.currentPromotionId
      if (val.promotionGroupKey){
        this.currentGiftList = this.shoppingCart.filter(item=>item.promotionGroupKey === val.promotionGroupKey && item.isGift === '1')
      }
      this.$refs.popup.open()
      this.mask = true
    },
    addGoods(val){
      const index = this.shoppingCart.findIndex(item=>item.goodsId === val.goodsId && !item.promotionGroupKey && !item.giftId)
      this.shoppingCart.splice(index,1,val)
      this.close()
    },
    subPromotionList(promotionList){
      this.delGoods(this.currentIndex)
      this.shoppingCart.splice(this.currentIndex,promotionList.length,...promotionList)
    },
    delGoods(index){
      if (this.shoppingCart[index].isPromotion){
        if (this.shoppingCart[index].isGift === '1'){
          const promotionEmptyBoxKey = this.shoppingCart[index].promotionEmptyBoxKey
          this.shoppingCart.splice(index, 1)
          if (promotionEmptyBoxKey){
            const index1 = this.shoppingCart.findIndex(item=>item.promotionEmptyBoxKey === promotionEmptyBoxKey)
            this.shoppingCart.splice(index1, 1)
          }
          return
        }
        const promotionGroupKey = this.shoppingCart[index].promotionGroupKey
        const promotionGoodsList = this.shoppingCart.filter(item=>item.promotionGroupKey === promotionGroupKey)
        for (let i in promotionGoodsList){
          this.shoppingCart.splice(this.shoppingCart.indexOf(promotionGoodsList[i]),1)
        }
        return
      }
      this.shoppingCart.splice(index, 1)
    },
    close(){
      this.$refs.popup.close()
      this.mask = false
    },
  }
}
</script>

<style lang="scss" scoped>
.body{
  background: #f6f6f6;
  height: 100rpx;
}
</style>
